<template>
	<view class="replacement-summary">
		<!-- 控制栏 -->
		<view class="control-bar">
			<view class="employee-selector" @click="showEmployeeSelector = true">
				<text class="selector-text">员工切换</text>
				<u-icon name="arrow-down" size="14" color="#000"></u-icon>
			</view>
			<view class="arrange-btn" @click="showArrangeOptions = true">
				<text class="arrange-text">{{ currentMonth }}月</text>
				<u-icon name="arrow-down" size="14" color="#000"></u-icon>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 左侧员工信息 -->
			<view class="employee-info">
				<view class="employee-card">
					<image 
						class="employee-avatar" 
						:src="currentEmployee.avatar || '/static/jeesite/logo200.png'"
						mode="aspectFill"
					></image>
					<view class="employee-name">{{ currentEmployee.name || '暂无员工' }}</view>
				</view>
			</view>
			
			<!-- 右侧排休表 -->
			<view class="schedule-container">
				<!-- 日期和排班信息 -->
				<scroll-view class="schedule-content" scroll-y>
					<view class="schedule-list">
						<view 
							class="schedule-item" 
							v-for="(day, index) in currentMonthDays" 
							:key="index"
						>
							<view class="day-number">{{ day.day }}</view>
							<view class="schedule-info" v-if="day.schedule">
								<view 
									class="schedule-block" 
									:class="getScheduleClass(day.schedule)"
									v-for="(schedule, sIndex) in day.schedule" 
									:key="sIndex"
								>
									{{ schedule }}
								</view>
							</view>
							<!-- <view class="schedule-dot" v-if="day.hasSchedule"></view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<view class="bottom-nav">
			<view class="nav-btn prev-btn" @click="prevEmployee">
				<text>上一人</text>
			</view>
			<view class="nav-btn next-btn" @click="nextEmployee">
				<text>下一人</text>
			</view>
		</view>
		
		<!-- 员工选择器弹窗 -->
		<u-popup v-model="showEmployeeSelector" mode="bottom" border-radius="20">
			<view class="employee-selector-popup">
				<view class="popup-header">
					<text class="popup-title">选择员工</text>
					<u-icon name="close" @click="showEmployeeSelector = false"></u-icon>
				</view>
				<view class="employee-list">
					<view 
						class="employee-item" 
						v-for="(employee, index) in employeeList" 
						:key="index"
						@click="selectEmployee(employee)"
					>
						<image class="employee-avatar-small" :src="employee.avatar || '/static/jeesite/logo200.png'"></image>
						<text class="employee-name-small">{{ employee.name }}</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 排列选项弹窗 -->
		<u-popup v-model="showArrangeOptions" mode="bottom" border-radius="20">
			<view class="arrange-options-popup">
				<view class="popup-header">
					<text class="popup-title">排休月份</text>
					<u-icon name="close" @click="showArrangeOptions = false"></u-icon>
				</view>
				<view class="arrange-options">
					<view class="option-item" :class="{ 'selected': currentMonth === 1 }" @click="selectMonth(1)">
						<text>1月</text>
						<u-icon v-if="currentMonth === 1" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 2 }" @click="selectMonth(2)">
						<text>2月</text>
						<u-icon v-if="currentMonth === 2" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 3 }" @click="selectMonth(3)">
						<text>3月</text>
						<u-icon v-if="currentMonth === 3" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 4 }" @click="selectMonth(4)">
						<text>4月</text>
						<u-icon v-if="currentMonth === 4" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 5 }" @click="selectMonth(5)">
						<text>5月</text>
						<u-icon v-if="currentMonth === 5" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 6 }" @click="selectMonth(6)">
						<text>6月</text>
						<u-icon v-if="currentMonth === 6" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 7 }" @click="selectMonth(7)">
						<text>7月</text>
						<u-icon v-if="currentMonth === 7" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 8 }" @click="selectMonth(8)">
						<text>8月</text>
						<u-icon v-if="currentMonth === 8" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 9 }" @click="selectMonth(9)">
						<text>9月</text>
						<u-icon v-if="currentMonth === 9" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 10 }" @click="selectMonth(10)">
						<text>10月</text>
						<u-icon v-if="currentMonth === 10" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 11 }" @click="selectMonth(11)">
						<text>11月</text>
						<u-icon v-if="currentMonth === 11" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
					<view class="option-item" :class="{ 'selected': currentMonth === 12 }" @click="selectMonth(12)">
						<text>12月</text>
						<u-icon v-if="currentMonth === 12" name="checkmark" size="16" color="#007aff"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		const now = new Date();
		const currentYear = now.getFullYear();
		const currentMonth = now.getMonth() + 1; // getMonth() 返回 0-11，需要 +1
		
		return {
			pageTitle: `${currentYear}年${currentMonth}月排休表`,
			navbarBackground: {
				background: '#fff'
			},
			navbarTitleColor: '#333',
			showEmployeeSelector: false,
			showArrangeOptions: false,
			currentEmployeeIndex: 0,
			currentEmployee: {},
			employeeList: [],
			currentMonthDays: [],
			approvalData: [],
			currentYear: currentYear,
			currentMonth: currentMonth
		}
	},
	onLoad() {
		this.loadApprovalInfo();
	},
	methods: {
		// 加载排休信息
		async loadApprovalInfo() {
			try {
				uni.showLoading({
					title: '加载中...'
				});
				
				const params = {
					pageNo: 1,
					pageSize: 50,
					month: this.currentMonth
				};
				
				const res = await this.$u.api.manageAudit.getApprovalInfo(params);
				
				if (res && res.list && res.list.length > 0) {
					this.approvalData = res.list;
					this.processEmployeeData();
					this.generateMonthDays();
					this.setCurrentEmployee(0);
				}else{
					this.employeeList = [];
					this.currentMonthDays = [];
					this.approvalData = [];
				}
				
				uni.hideLoading();
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
				console.error('加载排休信息失败:', error);
			}
		},
		
		// 处理员工数据
		processEmployeeData() {
			this.employeeList = this.approvalData.map(item => ({
				userId: item.approverUserId,
				name: item.approverUserName,
				avatar: '/static/jeesite/logo200.png', // 默认头像
				scheduleData: item
			}));
		},
		
		// 生成当月日期
		generateMonthDays() {
			const year = this.currentYear;
			const month = this.currentMonth;
			const daysInMonth = new Date(year, month, 0).getDate();
			this.currentMonthDays = [];
			
			for (let day = 1; day <= daysInMonth; day++) {
				this.currentMonthDays.push({
					day: day,
					schedule: null,
					hasSchedule: false
				});
			}
		},
		
		// 设置当前员工
		setCurrentEmployee(index) {
			if (this.employeeList.length > 0 && index >= 0 && index < this.employeeList.length) {
				this.currentEmployeeIndex = index;
				this.currentEmployee = this.employeeList[index];
				this.updateScheduleData();
			}
		},
		
		// 更新排班数据
		updateScheduleData() {
			if (!this.currentEmployee.scheduleData) return;
			
			const scheduleData = this.currentEmployee.scheduleData;
			
			// 重置所有日期
			this.currentMonthDays.forEach(day => {
				day.schedule = null;
				day.hasSchedule = false;
			});
			
			// 设置排班信息
			for (let day = 1; day <= 31; day++) {
				const dayKey = `day${day.toString().padStart(2, '0')}`;
				const scheduleValue = scheduleData[dayKey];
				
				if (scheduleValue && scheduleValue.trim() !== '') {
					const dayIndex = day - 1;
					if (dayIndex < this.currentMonthDays.length) {
						// 处理排班信息，可能是多个用逗号分隔
						const schedules = scheduleValue.split(',').map(s => s.trim()).filter(s => s);
						this.currentMonthDays[dayIndex].schedule = schedules;
						this.currentMonthDays[dayIndex].hasSchedule = true;
					}
				}
			}
		},
		
		// 获取排班样式类
		getScheduleClass(schedule) {
			if (!schedule || schedule.length === 0) return '';
			
			const scheduleText = schedule[0];
			if (scheduleText.includes('已排休')) {
				return 'schedule-rest';
			} else if (scheduleText.includes('替班')) {
				return 'schedule-substitute';
			} else if (scheduleText.includes('夜班')) {
				return 'schedule-night';
			}
			return 'schedule-default';
		},
		
		// 选择员工
		selectEmployee(employee) {
			const index = this.employeeList.findIndex(emp => emp.userId === employee.userId);
			if (index !== -1) {
				this.setCurrentEmployee(index);
			}
			this.showEmployeeSelector = false;
		},
		
		// 上一个员工
		prevEmployee() {
			if (this.currentEmployeeIndex > 0) {
				this.setCurrentEmployee(this.currentEmployeeIndex - 1);
			}
		},
		
		// 下一个员工
		nextEmployee() {
			if (this.currentEmployeeIndex < this.employeeList.length - 1) {
				this.setCurrentEmployee(this.currentEmployeeIndex + 1);
			}
		},
		
		// 选择月份
		async selectMonth(month) {
			this.currentMonth = parseInt(month);
			this.updatePageTitle();
			this.showArrangeOptions = false;
			
			// 重新加载数据
			await this.loadApprovalInfo();
		},
		
		// 更新页面标题
		updatePageTitle() {
			this.pageTitle = `${this.currentYear}年${this.currentMonth}月排休表`;
		}
	}
}
</script>

<style lang="scss" scoped>
.replacement-summary {
	background-color: #f5f5f5;
	height: 90vh;
	overflow: hidden;
	position: fixed;
	top: 100rpx;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.control-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
}

.employee-selector {
	display: flex;
	align-items: center;
	padding: 10rpx 40rpx;
	border: 1rpx solid #fff;
	border-radius: 30rpx;
	background-color: #fff;
}

.selector-text {
	font-size: 28rpx;
	color: #000;
	margin-right: 10rpx;
}

.arrange-btn {
	display: flex;
	align-items: center;
	padding: 10rpx 40rpx;
	border: 1rpx solid #fff;
	border-radius: 30rpx;
	background-color: #fff;
}

.arrange-text {
	font-size: 28rpx;
	color: #000;
	margin-right: 10rpx;
}

.main-content {
	display: flex;
	background-color: #fff;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	flex: 1;
}

.employee-info {
	width: 180rpx;
	padding: 15rpx 10rpx;
	background-color: #f5f5f5;
	border-right: 1rpx solid #eee;
	height: 100%;
	overflow-y: auto;
}

.employee-card {
	text-align: center;
}

.employee-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-bottom: 10rpx;
}

.employee-name {
	font-size: 24rpx;
	color: #333;
	font-weight: 400;
	background-color: #f5f5f5;
	padding: 6rpx 10rpx;
	border-radius: 6rpx;
	line-height: 1.2;
}

.schedule-container {
	flex: 1;
	padding: 10rpx 15rpx;
	height: 100%;
	display: flex;
	flex-direction: column;
}



.schedule-content {
	flex: 1;
	overflow: hidden;
}

.schedule-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100%;
	align-content: flex-start;
}

.schedule-item {
	display: flex;
	align-items: center;
	padding: 12rpx 0;
	// border-bottom: 1rpx solid #f5f5f5;
	position: relative;
	width: 50%;
	flex-shrink: 0;
}

.day-number {
	width: 50rpx;
	text-align: center;
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	margin-right: 15rpx;
}

.schedule-info {
	flex: 1;
}

.schedule-block {
	display: inline-block;
	padding: 10rpx;
	border-radius: 10rpx;
	font-size: 22rpx;
	margin-right: 8rpx;
	margin-bottom: 4rpx;
	background-color: #000;
	color: #fff;
	// width: 80%;
}

.schedule-rest {
	background-color: #3B7BF7;
}

.schedule-substitute {
	background-color: #FE383F;
}

.schedule-night {
	background-color: #FB9DCB;
}

.schedule-default {
	background-color: #07C8CF;
}

.schedule-dot {
	position: absolute;
	right: 15rpx;
	width: 6rpx;
	height: 6rpx;
	background-color: #ff4757;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}

.bottom-nav {
	display: flex;
	padding: 30rpx;
	gap: 20rpx;
}

.nav-btn {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
}

.prev-btn {
	background-color: #fff;
	color: #333;
}

.next-btn {
	background-color: #5B9AEB;
	color: #fff;
}

.employee-selector-popup,
.arrange-options-popup {
	padding: 30rpx;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.popup-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.employee-list {
	max-height: 600rpx;
	overflow-y: auto;
}

.employee-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.employee-avatar-small {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-right: 20rpx;
}

.employee-name-small {
	font-size: 28rpx;
	color: #333;
}

.arrange-options {
	display: flex;
	flex-direction: column;
}

.option-item {
	padding: 25rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	font-size: 28rpx;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.option-item.selected {
	background-color: #f0f8ff;
	color: #007aff;
}
</style>
